<div class='ab-editor abedit-overlay-bar'></div><div class='abedit-overlay-bar'></div><div class='abedit-overlay-bar'></div><div class='abedit-overlay-bar'></div>
<div class='ab-editor abedit-overlay-container'><div class='abedit-overlay'></div></div>
<div class='ab-editor ab-overlay-bar'></div>
<div class='ab-editor ab-overlay-bar'></div>
<div class='ab-editor ab-overlay-bar'></div>
<div class='ab-editor ab-overlay-bar'></div>
<div class='ab-editor ab-overlay-container'><div class='ab-overlay'></div></div>
<div id='ab-menus' class='ab-editor'><div class='title'></div><div class='menus'></div></div>
<div id='ab-dialog' class='ab-editor'>
	<div class="content">

    <div class="change-image pane normal">
        <div class="help-button narrow right">
            <div class="help-bubble">
                <div class="arrow"></div>
                <div class="border"></div>
                <div class="content">
                    <p>Change the selected image by typing in a URL or uploading a file from your computer.</p>
                    <!--p>Upoaded files are stored on A/B Tester.</p-->
                </div>
            </div>
        </div>
        <label>
            <span>Enter image URL</span>
            <input type="text">
        </label>
        <!--div class="browse-button small-button">
            <span>Browse Computer</span>
            <input type="file">
        </div-->
    </div>
    <div class="edit-attrs pane">
    </div>
    <div class="edit-html pane">
        <a class="help-button right" href="http://support.optimizely.com/customer/portal/articles/466021-how-can-i-use-%22edit-html%22-" target="_blank"></a>
        <p>Enter HTML to replace the selected element.</p>
        <div class="html-editor-container ui-resizable ui-resizable-autohide">
            <textarea id="html-editor" style="width: 475px; height: 238px"></textarea><div class="CodeMirror CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px;"><textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" autocorrect="off" autocapitalize="off"></textarea></div><div class="CodeMirror-scroll cm-s-default" tabindex="-1"><div style="position: relative"><div style="position: relative"><div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div><div class="CodeMirror-lines"><div draggable="true" style="position: relative; z-index: 0; outline: medium none;"><div style="position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden;"><pre><span>x</span></pre></div><pre class="CodeMirror-cursor">&nbsp;</pre><div style="position: relative; z-index: -1"></div><div></div></div></div></div></div></div></div>
            <div style="z-index: 1000; display: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div></div>
        <p class="invisible-warning error">The text may not be viewable in-browser depending on the styles on this element.</p>
        <p class="length-warning error">WARNING: The HTML exceeds 10,000 characters. This may slow down the page's load time. Try selecting a smaller element.</p>
    </div>
    <div class="edit-iframe pane">
        <label class="text">
            <span>IFrame Source (src)</span>
            <input type="text">
        </label>
    </div>
    <div class="edit-image pane">
        <p>This image has been edited.</p>
    </div>
    <div class="edit-link pane normal">
        <label class="text">
            <span>Text to display</span>
            <input type="text">
        </label>
        <label class="url">
            <span>Link URL</span>
            <input type="text">
        </label>
        <label class="new checkbox">
            <input type="checkbox">
            <span>Open in a new window or tab</span>
        </label>
    </div>
    <!--div class="edit-style pane wide">
    <div class="tab-container">
        <span data-tab="text">Text</span>
        <span data-tab="color-bg">Color &amp; Background</span>
        <span data-tab="dimensions">Dimensions</span>
        <span data-tab="borders">Borders</span>
        <span data-tab="layout">Layout</span>
        <span data-tab="other">Other</span>
        <div class="small-button toggle-advanced"></div>
    </div>
    <form class="standard view-container">
    <div class="text">
        <div class="column">
            <label>
                <span>Font Family</span>
                <input name="font-family" type="text">
            </label>
            <label>
                <span>Font Size</span>
                <input name="font-size" type="text">
            </label>
            <label>
                <span>Font Style</span>
                <select name="font-style">
                    <option value=""></option>
                    <option value="normal">normal</option>
                    <option value="italic">italic</option>
                    <option value="oblique">oblique</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label class="advanced">
                <span>Font Variant</span>
                <select name="font-variant">
                    <option value=""></option>
                    <option value="normal">normal</option>
                    <option value="small-caps">small caps</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label class="advanced">
                <span>Line Height</span>
                <input name="line-height" type="text">
            </label>
            <label class="advanced">
                <span>Word Break</span>
                <select name="word-break">
                    <option value=""></option>
                    <option value="normal">normal</option>
                    <option value="break-word">break word</option>
                </select>
            </label>
            <label class="advanced">
                <span>Word Spacing</span>
                <input name="word-spacing" type="text">
            </label>
            <label class="advanced">
                <span>Word Wrap</span>
                <input name="word-spacing" type="text">
            </label>
        </div>
        <div class="column right">
            <label class="advanced">
                <span>Letter Spacing</span>
                <input name="letter-spacing" type="text">
            </label>
            <label class="advanced">
                <span>Overflow</span>
                <select name="text-overflow">
                    <option value=""></option>
                    <option value="visible">visible</option>
                    <option value="hidden">hidden</option>
                    <option value="scroll">scroll</option>
                    <option value="auto">auto</option>
                    <option value="clip">clip</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label>
                <span>Text Alignment</span>
                <select name="text-align">
                    <option value=""></option>
                    <option value="left">left</option>
                    <option value="center">center</option>
                    <option value="right">right</option>
                    <option value="justify">justify</option>
                    <option value="start">start</option>
                    <option value="end">end</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label>
                <span>Text Decoration</span>
                <select name="text-decoration">
                    <option value=""></option>
                    <option value="none">none</option>
                    <option value="inherit">inherit</option>
                    <option value="underline">underline</option>
                    <option value="line-through">line through</option>
                    <option value="overline">overline</option>
                    <option value="blink">blink</option>
                </select>
            </label>
            <label class="advanced">
                <span>Text Transform</span>
                <select name="text-transform">
                    <option value=""></option>
                    <option value="none">none</option>
                    <option value="capitalize">capitalize</option>
                    <option value="uppercase">upper case</option>
                    <option value="lowercase">lower case</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label class="advanced">
                <span>Text Shadow</span>
                <input name="text-shadow" type="text">
            </label>
            <label>
                <span>Font Weight</span>
                <select name="font-weight">
                    <option value=""></option>
                    <option value="normal">normal</option>
                    <option value="bold">bold</option>
                    <option value="100">100 (thin)</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                    <option value="400">400 (medium)</option>
                    <option value="401">401</option>
                    <option value="500">500</option>
                    <option value="600">600</option>
                    <option value="700">700</option>
                    <option value="800">800</option>
                    <option value="900">900 (thick)</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
        </div>
    </div>
    <div class="color-bg">
        <div class="color-picker-container">
            <label>
                <span>Font Color</span>
                <input class="colored-input" name="color" type="text">
            </label>
            <div class="color-picker-button"></div>
            <div class="color-picker"></div>
        </div>
        <div class="color-picker-container">
            <label>
                <span>Background Color</span>
                <input class="colored-input" name="background-color" type="text">
            </label>
            <div class="color-picker-button"></div>
            <div class="color-picker"></div>
        </div>
        <label>
            <span>Background Image</span>
            <input name="background-image" type="text">
        </label>
        <label>
            <span>Background Position</span>
            <input name="background-position" type="text">
        </label>
        <label>
            <span>Background Repeat</span>
            <select name="background-repeat">
                <option value=""></option>
                <option value="no-repeat">no repeat</option>
                <option value="repeat">repeat</option>
                <option value="repeat-x">repeat (horizontal only)</option>
                <option value="repeat-y">repeat (vertical only)</option>
                <option value="inherit">inherit</option>
            </select>
        </label>
    </div>
    <div class="dimensions">
        <div class="column">
            <label>
                <span>Height</span>
                <input name="height" type="text">
            </label>
            <label class="advanced">
                <span>Max Height</span>
                <input name="max-height" type="text">
            </label>
            <label class="advanced">
                <span>Min Height</span>
                <input name="min-height" type="text">
            </label>
            <label>
                <span>Width</span>
                <input name="width" type="text">
            </label>
            <label class="advanced">
                <span>Max Width</span>
                <input name="max-width" type="text">
            </label>
            <label class="advanced">
                <span>Min Width</span>
                <input name="min-width" type="text">
            </label>
        </div>
        <div class="column right">
            <label>
                <span>Margin</span>
                <input name="margin" type="text">
            </label>
            <label class="advanced">
                <span>Margin Top</span>
                <input name="margin-top" type="text">
            </label>
            <label class="advanced">
                <span>Margin Bottom</span>
                <input name="margin-bottom" type="text">
            </label>
            <label class="advanced">
                <span>Margin Left</span>
                <input name="margin-left" type="text">
            </label>
            <label class="advanced">
                <span>Margin Right</span>
                <input name="margin-right" type="text">
            </label>
            <label>
                <span>Padding</span>
                <input name="padding" type="text">
            </label>
            <label class="advanced">
                <span>Padding Top</span>
                <input name="padding-top" type="text">
            </label>
            <label class="advanced">
                <span>Padding Bottom</span>
                <input name="padding-bottom" type="text">
            </label>
            <label class="advanced">
                <span>Padding Left</span>
                <input name="padding-left" type="text">
            </label>
            <label class="advanced">
                <span>Padding Right</span>
                <input name="padding-right" type="text">
            </label>
        </div>
        <br>
    </div>
    <div class="borders">
        <div class="color-picker-container">
            <label>
                <span>Border Color</span>
                <input class="colored-input" name="border-color" type="text">
            </label>
            <div class="color-picker-button"></div>
            <div class="color-picker"></div>
        </div>
        <label>
            <span>Border Style</span>
            <select name="border-style">
                <option value=""></option>
                <option value="none">none</option>
                <option value="solid">solid</option>
                <option value="dotted">dotted</option>
                <option value="dashed">dashed</option>
                <option value="outset">outset</option>
                <option value="inset">inset</option>
                <option value="groove">groove</option>
                <option value="ridge">ridge</option>
                <option value="inherit">inherit</option>
            </select>
        </label>
        <label>
            <span>Border Width</span>
            <input name="border-width" type="text">
        </label>
        <label class="advanced">
            <span>Border Top</span>
            <input name="border-top" type="text">
        </label>
        <label class="advanced">
            <span>Border Bottom</span>
            <input name="border-bottom" type="text">
        </label>
        <label class="advanced">
            <span>Border Left</span>
            <input name="border-left" type="text">
        </label>
        <label class="advanced">
            <span>Border Right</span>
            <input name="border-right" type="text">
        </label>
    </div>
    <div class="layout">
        <div class="column">
            <label>
                <span>Top</span>
                <input name="top" type="text">
            </label>
            <label>
                <span>Bottom</span>
                <input name="bottom" type="text">
            </label>
            <label>
                <span>Left</span>
                <input name="left" type="text">
            </label>
            <label>
                <span>Right</span>
                <input name="right" type="text">
            </label>
            <label>
                <span>Z Index</span>
                <input name="z-index" type="text">
            </label>
        </div>
        <div class="column right">
            <label class="advanced">
                <span>Display</span>
                <select name="display">
                    <option value=""></option>
                    <option value="none">none</option>
                    <option value="block">block</option>
                    <option value="inline">inline</option>
                    <option value="inline-block">inline table</option>
                    <option value="list-item">list item</option>
                    <option value="table">table</option>
                    <option value="table-caption">table caption</option>
                    <option value="table-cell">table cell</option>
                    <option value="table-column">table column</option>
                    <option value="table-column-group">table column group</option>
                    <option value="table-footer-group">table footer group</option>
                    <option value="table-header-group">table header group</option>
                    <option value="table-row">table row</option>
                    <option value="table-row-group">table row group</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label class="advanced">
                <span>Visibility</span>
                <select name="visibility">
                    <option value=""></option>
                    <option value="visible">visible</option>
                    <option value="hidden">hidden</option>
                    <option value="collapse">collapse</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label>
                <span>Position</span>
                <select name="position">
                    <option value=""></option>
                    <option value="absolute">absolute</option>
                    <option value="fixed">fixed</option>
                    <option value="relative">relative</option>
                    <option value="static">static</option>
                    <option value="inherit">inherit</option>
                </select>
            </label>
            <label>
                <span>Float</span>
                <select name="float">
                    <option value=""></option>
                    <option value="left">left</option>
                    <option value="right">right</option>
                    <option value="none">none</option>
                </select>
            </label>
            <label>
                <span>Clear</span>
                <select name="clear">
                    <option value=""></option>
                    <option value="left">left</option>
                    <option value="right">right</option>
                    <option value="both">both</option>
                </select>
            </label>
        </div>
    </div>
    <div class="other">
        <label>
            <span>Table Border Collapse</span>
            <select name="border-collapse">
                <option value=""></option>
                <option value="collapse">collapse</option>
                <option value="separate">separate</option>
            </select>
        </label>
        <label>
            <span>Table Border Spacing</span>
            <input name="border-spacing" type="text">
        </label>
        <label>
            <span>List Style Type</span>
            <select name="list-style-type">
                <option value=""></option>
                <option value="armenian">Armenian</option>
                <option value="circle">circle</option>
                <option value="decimal">decimal</option>
                <option value="georgian">Georgian</option>
                <option value="hebrew">Hebrew</option>
                <option value="hiragana">Hiragana</option>
                <option value="hiragana-iroha">Hiragana-Iroha</option>
                <option value="inherit">inherit</option>
                <option value="katakana">Katakana</option>
                <option value="katakana-iroha">Katakana-Iroha</option>
                <option value="lower-alpha">lower-Alpha</option>
                <option value="lower-greek">lower-Greek</option>
                <option value="lower-latin">lower-Latin</option>
                <option value="lower-roman">lower-Roman</option>
                <option value="none">none</option>
                <option value="square">square</option>
                <option value="upper-alpha">upper-Alpha</option>
                <option value="upper-latin">upper-Latin</option>
                <option value="upper-roman">upper-Roman</option>
            </select>
        </label>
    </div>
    </form>
    </div-->
    <div class="edit-text pane">
        <p>Edit the selected element.</p>
        <div class="text-editor-container ui-resizable ui-resizable-autohide">
            <div class="overlay"></div>
            <textarea style="width: 475px; height: 238px" id="text-editor"></textarea><span class="mceEditor defaultSkin" id="text-editor_parent">
            <div style="z-index: 1000; display: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
            <p class="invisible-warning error">The text may not be viewable in-browser depending on the styles on this element.</p>
            <p class="length-warning error">WARNING: The HTML exceeds 10,000 characters. This may slow down the page's load time. Try selecting a smaller element.</p>
    </div>
    <div class="insert-image pane normal">
        <div class="help-button narrow right">
            <div class="help-bubble">
                <div class="arrow"></div>
                <div class="border"></div>
                <div class="content">
                    <p>Insert an image by typing in a URL or uploading a file from your computer.</p>
                    <p>Upoaded files are stored on A/B Tester.</p>
                </div>
            </div>
        </div>
        <label>
            <span>Enter image URL</span>
            <input type="text">
        </label>
        <div class="browse-button small-button">
            <span>Browse Computer</span>
            <input type="file">
        </div>
    </div>
    <div class="insert-text pane">
        <div class="label">A div of text has been inserted.</div>
    </div>
    <div class="move-and-resize pane narrow">
        <p>Move using your mouse or keyboard arrows.<br>
            (shift to move faster)</p>
        <p>Resize by dragging the handles along edges.<br>
            (shift to maintain aspect)</p>
        <label class="checkbox">
            <input class="bring-to-front" type="checkbox">
            <span>Also bring to front</span>
        </label>
    </div>
    <div class="rearrange pane narrow">
        <div class="help-button narrow right">
            <div class="help-bubble">
                <div class="arrow"></div>
                <div class="border"></div>
                <div class="content">
                    <p>Rearrange detaches your selected element and reattaches it to
                        a new part of the page. This is different from the "move" function,
                        which displaces your element by a fixed number of pixels.</p>

                    <p>If you have <b>Automatically select element</b> checked, Rearrange
                        will try to find a container it thinks you wanted to rearrange.</p>
                </div>
            </div>
        </div>
        <p>Rearrange using your mouse.</p>
        <label class="checkbox">
            <input class="auto-select" type="checkbox">
            <span>Automatically select element</span>
        </label>
    </div>
    <div class="remove pane narrow">
        <p>This element has been removed.</p>
        <label class="checkbox not-spaced">
            <input name="action" value="remove" type="radio">
            <span>Remove element from page</span>
        </label>
        <label class="checkbox not-spaced">
            <input name="action" value="invisible" type="radio">
            <span>Make element invisible</span>
        </label>
    </div>
    <div class="create-new-click-goal pane narrow">
        <p>Clicks on this element will be tracked by the custom event name you specify.</p>
        <label class="spaced-bottom">
            <span>Custom event name</span>
            <span class="error">This field is required.</span>
            <input class="custom-event" type="text">
        </label>
        <a class="stop-track-clicks">Stop tracking this element</a>
    </div>
    <div class="track-with-twilio pane narrow">
        <a href="http://support.optimizely.com/" target="_blank">How does phone call tracking work?</a>
        <p>The phone numbers have been replaced with your Twilio phone numbers.</p>
    </div>
    <p class="message"></p>

	</div>
</div>